<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>JSP - Hello World</title>--%>
<%--&lt;%&ndash;    引入easyui  前端ui框架&ndash;%&gt;--%>
<%--    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/default/easyui.css">--%>
<%--    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/icon.css">--%>
<%--    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/demo/demo.css">--%>
<%--    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.min.js"></script>--%>
<%--    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.easyui.min.js"></script>--%>
<%--    <script type="text/javascript" src="jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>--%>

<%--    <style>--%>
<%--        /*改变布局方式，改为弹性布局*/--%>
<%--        body{--%>
<%--            /*弹性布局*/--%>
<%--            display: flex;--%>
<%--            /*页面宽高 填充整个屏幕*/--%>
<%--            width:100%;--%>
<%--            /*vh:viewPoint Height 视图高度*/--%>
<%--            height:100vh;--%>
<%--            /*页面内的元素摆放位置的改变*/--%>
<%--            justify-content: center;--%>
<%--            /*子元素也是居中摆放*/--%>
<%--            align-item:center;--%>
<%--            /*取消元素的内外边距  针对body元素*/--%>
<%--            padding: 0;--%>
<%--            margin: 0;--%>
<%--            background-image: url("imgs/login.jpg");--%>
<%--        }--%>
<%--        .login-container{--%>
<%--            /*设置边框 和 表单的宽高*/--%>
<%--            width:100%;--%>
<%--            max-width: 400px;--%>
<%--            /*设置边框 实现 1像素   灰色线条*/--%>
<%--            border: 1px solid #ccc;--%>
<%--            /*表单的背景颜色*/--%>
<%--            background: #fff;--%>
<%--            /*盒子的阴影*/--%>
<%--            box-shadow: 0 0 10px rgb(0,0,0,0.1);--%>
<%--            /*内边距*/--%>
<%--            padding:10px;--%>
<%--        }--%>
<%--    </style>--%>
<%--</head>--%>


<%--<body>--%>
<%--&lt;%&ndash;登录页面，全局居中表单登录界面--%>
<%--     登录表单 接口名称为login--%>
<%--     采用 弹性布局的方式排版页面--%>
<%--&ndash;%&gt;--%>
<%--<div class="login-container">--%>
<%--    <form id="loginForm" actiom="login" method="post">--%>
<%--&lt;%&ndash;        表单控件内边距&ndash;%&gt;--%>
<%--    <div style="padding: 50px 60px">--%>


<%--        <div style="margin-bottom: 20px">--%>
<%--            <input class="easyui-textbox"--%>
<%--                   prompt="请输入用户名"--%>
<%--                   name="userName"--%>
<%--                   value="${requestScope.UserName}">--%>
<%--        </div>--%>

<%--        <div style="margin-bottom: 20px" >--%>
<%--            <input class="easyui-passwordbox"--%>
<%--                   prompt="请输入密码"--%>
<%--                   name="passWord"--%>
<%--                   value="requestScope.Password">--%>
<%--        </div>--%>
<%--&lt;%&ndash;        登录和重置按钮   使用OnClick()方法提交表单&ndash;%&gt;--%>
<%--        <a href="#" onclick="$('#loginForm').submit()"--%>
<%--        class="easyui-linkbutton">登录</a>--%>
<%--        <a href="#" class="easyui-linkbutton">重置</a>--%>
<%--&lt;%&ndash;        通过jstl 去获取登录请求返回结果 一般是失败的请求结果&ndash;%&gt;--%>
<%--        <span>--%>
<%--&lt;%&ndash;            通过requestScope获取错误的信息--%>
<%--           C开头：    targlib 书本的第一章 JSTL--%>
<%--           $ EL  书本第六章的EL--%>
<%--           EL语法和JSTL 结合--%>
<%--&ndash;%&gt;--%>
<%--            <c:if test="${not empty requestScope.error}">--%>
<%--                ${requestScope.error}--%>
<%--            </c:if>--%>
<%--        </span></div>--%>
<%--    </form>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>

    <%--    引入easyui 前端UI框架--%>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>

    <style>
        <%--        改变布局方式 改为弹性布局--%>
        body {
            /*弹性布局*/
            display: flex;
            /*    页面的宽高 填充满整个屏幕*/
            width: 100%;
            /*vh  viewPoint Height 视图高度*/
            height: 100vh;
            /*    页面内的元素摆放位置改变*/
            justify-content: center;
            /*    子元素也是居中摆放*/
            align-items: center;
            /*取消元素的内外边距 针对body元素*/
            padding: 0;
            margin: 0;
            /*设置页面的背景图片*/
            background-image: url("imgs/login.jpg");
        }

        .login-container {
            /*    设置边框 和 表单的宽高*/
            width: 100%;
            max-width: 400px;
            /*设置边框 实线 1像素宽  灰色线条*/
            border: 1px solid #ccc;

            /*表单的 背景颜色 白色*/
            background: white;
            /*盒子阴影*/
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            /*内边距 10像素*/
            padding: 10px;
        }
        /*错误提示信息样式*/
        .error{
            color:red;
            margin-top: 30px;
        }

    </style>
</head>


<body>
<%--
登录页面 全局居中表单登录界面
登录表单 接口名称为 login
采用 弹性布局的方式 排版页面
--%>
<div class="login-container">
    <form id="loginForm" action="login" method="post">
        <%--        表单控件内边距--%>
        <div style="padding: 50px 60px">

            <%--            登录框--%>
            <div style="margin-bottom: 20px">
                <input class="easyui-textbox"
                       prompt="请输入用户名"
                       name="userName"
                       value="${requestScope.UserName}"
                >
            </div>
            <%--密码框--%>
            <div style="margin-bottom: 20px">
                <input class="easyui-passwordbox"
                       prompt="请输入密码"
                       name="passWord"
                       value="${requestScope.Password}"
                >
            </div>

            <%--        登录 和重置按钮  使用onclick方法提交表单--%>
            <a href="#" onclick="$('#loginForm').submit()"
               class="easyui-linkbutton">登录</a>
            <a href="#" class="easyui-linkbutton">重置</a>
            <%--        通过jstl 去获取登录请求返回结果 一般是失败的请求结果--%>
<%--                换行符--%>
                <br>
            <span class="error">

<%--            通过RequestScope获取错误的登录信息
        c: taglib 书本上的第六章 JSTL
        $  EL     书本上第六章的 EL

        EL 语法 和JSTL 结合
--%>
            <c:if test="${ not empty requestScope.error}">
                ${requestScope.error}
            </c:if>
            </span>
        </div>

    </form>

</div>


</body>
</html>